<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css"href="../static/css/admin.css" media="all"/>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script src="../static/js/jquery-3.6.0.min.js"></script>
</head>

<body>
<script src="../static/layui/layui.js"></script>
<div class="layui-fluid">
    <!--   选项卡- 卡片风格-->
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <!-- layui-block layui-inline-->
                <div class="layui-inline">
                    <label class="layui-form-label">教练姓名</label>
                    <div class="layui-input-block">
                        <input type="text" id="courseCoach" name="courseCoach" placeholder="请输入姓名"  class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">课程名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="courseName" name="courseName" placeholder="请输入课程名称"  class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">上课时长</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="courseTime" name="courseTime" placeholder="请选择时间">
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-admin" id="btn_search" lay-submit lay-filter="LAY-user-back-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"> 查询</i>
                </button>
            </div>
        </div>
        <div class="layui-card-body">
            <!--头部工具栏-->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layuiadmin-btn-admin" lay-event="add">新增</button>
                    <button class="layui-btn layuiadmin-btn-admin" lay-event="delete">Excel导出</button>
                    <button class="layui-btn layuiadmin-btn-admin" lay-event="update">Excel导入</button>
                </div>
            </script>

            <!--数据表格-->
            <table class="layui-hide" id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>
            <!-- 侧边工具栏-->
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

        </div>
        </div>
</div>
<table class="layui-hide" id="ID-table-demo-search"></table>
<script src="../static/js/jquery-3.6.0.min.js"></script>
<script>
    layui.use(['table','form','laydate'],function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;


        // 监听数据表格头部工具栏的新增：点击新增按钮，弹出层弹出的是add.html
        table.on('toolbar(LAY-user-back-manage)',function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus);
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type:2,//iframe
                        title:'添加课程信息',
                        content:'addCourse.html',
                        area:['450px','500px'],
                        maxmin:true,
                        // btn:['确定','取消'],
                        yes:function (index, layero) {
                            //获取add.html子页面
                            var body = layer.getChildFrame('body', index);
                            //获取页面中表单输入框的数据
                            var submitData = body.find('#myform').serialize();
                            //发起Ajax异步请求
                            $.ajax({
                                url:"http://localhost:8181/course/insertCourse",
                                type:"post",
                                data:submitData,
                                dataType:"json",
                                success:function (res) {//res响应回来的数据code msg
                                    if(res.code==200){
                                        layer.msg(res.msg,{
                                            offset:"15px",
                                            icon:1,
                                            time:1000
                                        },function () {
                                            //刷新页面-页面也要显示新增的数据
                                            window.location.reload();
                                        })
                                    }
                                    if(res.code==500){
                                        layer.msg(res.msg,{
                                            offset:"15px",
                                            icon:1,
                                            time:1000
                                        },function () {
                                            //刷新页面-页面也要显示新增的数据
                                            window.location.reload();
                                        })
                                    }
                                    //关闭Layer弹出层
                                    layer.close(index);
                                }
                            })
                        }
                    })
            }
        });
        // 分页查询
        table.render({
            elem:'#LAY-user-back-manage'//绑定table的id值
            ,url: 'http://localhost:8181/course/listAllCoursePage' // 此处为静态模拟数据，实际使用时需换成真实接口
            ,title:"课程表"
            ,toolbar:'#toolbarDemo'//开启头部工具栏
            ,cols: [[
            // {checkbox: true, fixed: true},
            {field:'id',fixed:"id", title: 'ID', width:50}
            ,{field:'courseName', title: '课程名', width:200}
            ,{field:'courseCoach', title: '课程教练', width:200,}
            ,{field:'courseTime', title: '课程时长', width:200}
            ,{field:'courseCount', title: '课程容量',width:200}
            ,{field:'courseAlready', title: '已报人数', width:200}
            ,{field:'courseDate', title: '课程日期',  width:200}
            ,{field:'right',title:"操作",toolbar:'#barDemo',width:200},
        ]],
            //开启分页
            page:true,
            limits:[5,10,15,20]
        })
        $("#btn_search").click(function () {
            //获取姓名和身份证号码值
            var courseName = $("#courseName").val();
            var courseCoach = $("#courseCoach").val();
            var courseTime = $("#courseTime").val();
            //表格重载LAY-user-back-manage
            table.reload('LAY-user-back-manage',{
                url:'http://localhost:8181/course/listAllCoursePage',
                page:{
                    curr:1//重写从第一页刷新
                },
                where:{
                    courseName:courseName,
                    courseCoach:courseCoach,
                    courseTime:courseTime
                }
            })
        })
        //监听侧边工具栏
        table.on('tool(LAY-user-back-manage)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){        //删除
                layer.confirm('确定删除吗？', function(index){
                    //使用Jquery的Ajax的异步请求
                    $.ajax({
                        url: "http://localhost:8181/course/deleteCourseById",//请求路径
                        type:"post",
                        data:{id:data.id},  //前端请求给后端的参数
                        dataType: "json",  //响应数据格式
                        success:function (res){ //res是回应的数据
                            //弹出提示信息
                            layer.alert(res.msg);
                            // 删除对应行的 DOM 结构，并更新缓存
                            obj.del();
                            //关闭弹出层
                            layer.close(index);
                        }
                    })
                });
            } else if(layEvent   === 'edit'){
                //编辑
                layer.open({
                    type:2,//iframe
                    title:'编辑课程信息',
                    content:'editCourse.html',
                    area:['450px','500px'],
                    maxmin:true,
                    // btn:['确定','取消'],
                    yes:function (index, layero) {
                        //获取edit.html子页面
                        var body = layer.getChildFrame('body', index);
                        //获取页面中表单输入框的数据
                        var submitData = body.find('#myform').serialize();
                        //发起Ajax异步请求
                        $.ajax({
                            url: "http://localhost:8181/course/updateCourseById",
                            type: "post",
                            data: submitData,
                            dataType: "json",
                            success: function (res) { //res响应回来的数据code msg
                                if (res.code == 200) {
                                    layer.msg(res.msg, {
                                        offset: "15px",
                                        icon: 1,
                                        time: 1000
                                    }, function () {
                                        //刷新页面-页面也要显示新增的数据
                                        window.location.reload();
                                    })
                                }
                                if (res.code == 500) {
                                    layer.msg(res.msg, {
                                        offset: "15px",
                                        icon: 1,
                                        time: 1000
                                    }, function () {
                                        //刷新页面-页面也要显示新增的数据
                                        window.location.reload();
                                    })
                                }
                                //关闭Layer弹出层
                                layer.close(index);
                            }
                        })
                    },
                    //做页面数据回显
                    success:function(layero,index) {
                        //获取edit子页面
                        var body = layer.getChildFrame('body', index);
                        //得到iframe页的窗口对象，需要把回显的数据渲染在iframe层的edit页面表单中
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        //输入框的回显
                        body.find("input[name=id]").val(data.id);  //id是隐藏的
                        body.find("input[name=courseName]").val(data.courseName);  //courseName
                        body.find("input[name=courseCoach]").val(data.courseCoach);  //courseCoach
                        body.find("input[name=courseTime]").val(data.courseTime);   //courseTime
                        body.find("input[name=courseCount]").val(data.courseCount);  //courseCount
                        body.find("input[name=courseAlready]").val(data.courseAlready);  //courseAlready
                        body.find("input[name=courseDate]").val(data.role);  //courseDate
                        //单选框的回显
                        // body.find("input[value="+data.memberSex+"]").attr("checked","checked");

                    },
                })
            }

            // 同步更新缓存对应的值
            // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
        });


    });
</script>
</body>
</html>